<template>
  <div id="app-design">
    <!-- 上侧工具栏 toolbar #proto-toolbar -->
    <tool-bar />
    <!-- end toolbar -->

    <!-- 主 - 画图区 -->
    <div id="proto-main-content">
      <!-- 画布 - 设计 -->
      <!-- cursor: url("/action/手.png"),default; -->
      <!-- @click="clickDesignHandler()" -->

      <div
        id="design"
        :style="{
          cursor: !cursorData ? 'auto' : cursorData,
          width: designSize.width + 'px',
          height: designSize.height + 'px'
        }"
        style="z-index:1;"
      >
        <!-- 控制放大缩小时，focus 鼠标的位置 -->
        <div
          class="design-viewport"
          style="width:1880px;height:942px;"
          :style="{
            transform:
              'matrix(1,0,0,1,' + _transformxy.x + ',' + _transformxy.y + ')'
          }"
        >
          <div class="screen-box zoom-area" style="width:100%;height:100%;">
            <div id="screen">
              <div id="canvas" style="transform: scale(1);">
                <div id="widget-list"></div>
              </div>
            </div>
          </div>
          <!-- end screen-box no-zoom-area -->

          <!-- 选中的框，因为可以多选，所以需要把框放在外面 -->
          <div
            class="no-zoom-area handler"
            style="top: 0%; left: 0%; width: 100%; height: 100%;"
          >
            <!-- 多选时的外框 -->
            <!-- <div class="items-total-border"></div> -->

            <!-- 移动时的参考线、辅助线 -->
            <div class="move-reference-line">
              <!-- alt按下显示的参考线 -->
              <div class="alt-lines"></div>
              <!-- 移动时显示参考线 -->
              <!-- v-if="moving" -->
              <div v-if="moving" class="move-lines">
                <div v-for="(item, index) in lines" :key="index">
                  <!-- 距离长度 -->
                  <div
                    class="text"
                    v-if="item.showText"
                    :style="{ left: item.px.tx, top: item.px.ty }"
                  >
                    {{ item.len }}
                  </div>
                  <!-- 距离线 - 分为宽和高 -->
                  <div
                    v-if="item.direction == 'vertical'"
                    class="line"
                    :class="[item.type, item.direction]"
                    :style="{
                      height: item.px.len,
                      top: item.y + 1 + 'px',
                      left: item.x + 1 + 'px'
                    }"
                  ></div>
                  <div
                    v-if="item.direction == 'horizontal'"
                    class="line"
                    :class="[item.type, item.direction]"
                    :style="{
                      width: item.px.len,
                      top: item.y + 1 + 'px',
                      left: item.x + 1 + 'px'
                    }"
                  ></div>
                </div>
              </div>
              <!-- 移动时的块 -->
              <!-- <div class="move-section"></div> -->
            </div>

            <!-- 四周的框 - 选中单个或选中多个 -->
            <div class="select-borders">
              <!-- 多选时的大外框 - 优化方案：只选中一个时为null -->
              <div
                v-if="!!totalWiget"
                class="items-total-border"
                :style="{
                  width: totalWiget.width + 'px',
                  height: totalWiget.height + 'px',
                  top: totalWiget.top + 1 + 'px',
                  left: totalWiget.left + 1 + 'px'
                }"
              ></div>

              <!-- 单个wiget的边框 -->
              <div
                v-for="(item, index) in selects"
                :key="index"
                class="item-select-border"
                :style="{
                  width: item.config.width + 'px',
                  height: item.config.height + 'px',
                  top: item.config.top + 1 + 'px',
                  left: item.config.left + 1 + 'px'
                }"
              ></div>

              <!-- hover 边框 -->
              <div
                v-if="!!hoverWidget"
                :style="{
                  width: hoverWidget.config.width + 'px',
                  height: hoverWidget.config.height + 'px',
                  top: hoverWidget.config.top + 1 + 'px',
                  left: hoverWidget.config.left + 1 + 'px'
                }"
                class="item-hover-border"
              ></div>
            </div>

            <!-- resize圆点，rotate旋转 -->
            <div class="selection-handler" draggable="false">
              <!--  -->
              <div
                class="rect-select"
                v-if="!!totalWiget"
                :style="{
                  width: totalWiget.width + 'px',
                  height: totalWiget.height + 'px',
                  top: totalWiget.top + 1 + 'px',
                  left: totalWiget.left + 1 + 'px'
                }"
              >
                <!-- 旋转图标 - 点击后，光标显示在右侧角度 -->
                <div v-show="!moving" class="rotate">
                  <icon name="icon-xuanzhuan_huaban1" />
                </div>
                <!-- end 旋转图标 -->
                <div v-show="!moving">
                  <!-- 中上圆角 -->
                  <div
                    class="t resizable-handler"
                    @mousedown="resizeRectHandler('t', $event)"
                    style="cursor: n-resize;"
                  ></div>
                  <!-- 中下圆角 -->
                  <div
                    class="b resizable-handler"
                    @mousedown="resizeRectHandler('b', $event)"
                    style="cursor: s-resize;"
                  ></div>
                  <!-- 中右圆角 -->
                  <div
                    class="r resizable-handler"
                    @mousedown="resizeRectHandler('r', $event)"
                    style="cursor: e-resize;"
                  ></div>
                  <!-- 中左圆角 -->
                  <div
                    class="l resizable-handler"
                    @mousedown="resizeRectHandler('l', $event)"
                    style="cursor: w-resize;"
                  ></div>
                  <!-- 右上圆角 -->
                  <div
                    class="tr resizable-handler"
                    @mousedown="resizeRectHandler('tr', $event)"
                    style="cursor: ne-resize;"
                  ></div>
                  <!-- 左上圆角 -->
                  <div
                    class="tl resizable-handler"
                    @mousedown="resizeRectHandler('tl', $event)"
                    style="cursor: nw-resize;"
                  ></div>
                  <!-- 右下圆角 -->
                  <div
                    class="br resizable-handler"
                    @mousedown="resizeRectHandler('br', $event)"
                    style="cursor: se-resize;"
                  ></div>
                  <!-- 左下圆角 -->
                  <div
                    class="bl resizable-handler"
                    @mousedown="resizeRectHandler('bl', $event)"
                    style="cursor: sw-resize;"
                  ></div>

                  <div class="t square"></div>
                  <div class="b square"></div>
                  <div class="r square"></div>
                  <div class="l square"></div>
                  <div class="tr square"></div>
                  <div class="tl square"></div>
                  <div class="br square"></div>
                  <div class="bl square"></div>
                </div>
              </div>
            </div>
            <!-- end selection-handler -->
          </div>
          <!-- end no-zoom-area handler -->

          <div
            class="zoom-area editing-text-area"
            style="transform: scale(1);"
          ></div>

          <!-- 双击修改文本内容 -->
          <div class="zoom-area editing-text-area" style="transform: scale(1);">
            <!-- <div class="editor-wrapper" style="position:absolute;top:0px;left:0px;">
              <div contenteditable="true" id="text_editor" style="pointer-events: auto;">
                <div class="rich-text" style="padding:0px;">
                  <p>xxxx</p>
                </div>
              </div>
            </div>-->
          </div>
        </div>
        <!-- end design-viewport -->

        <!-- 区域选择 -->
        <div class="range-selection"></div>
      </div>
      <!-- end 画布 - 设计 -->

      <!-- 快速工具栏 .quick-toolbar -->
      <quick-toolbar />
      <!-- 页面管理及元素管理 -->

      <left-pane />
      <!-- end 页面管理及元素管理 -->

      <!-- 视图 - 参考线、链接上一页、画布滚动条、画布坐标系等 -->
      <proto-viewport />
      <!-- end 视图 -->

      <right-pane />
    </div>
    <!-- end 主 - 画图区 -->

    <!-- 底部 -->
    <!-- <div class="footer bottom-view-absolute" style="font-size:10px;">南京紫枫信息科技有限责任公司</div> -->
  </div>
</template>
<script src="@/assets/app/design/_id.js" />

<style lang="less">
@import '@/assets/design.less';

</style>
<style lang="less">
body {
  overflow: hidden;
}

#widget-list {
  .group-widget {
    user-select: none;

    background-color: white;
  }

  .group-widget:focus,
  .widget:focus {
    outline: 0;
  }
}

</style>

<style lang="less" scoped>
@import '@/assets/app/design/_id.less';

</style>
